import { defineStore } from 'pinia'
import { ref } from 'vue'
/**
 *  如何创建一个 pinia 的 store 存储全局数据：
 * 1. 使用defineStore函数创建store（函数）, 名字建议use 开头，例如： useXxx
 *    语法：defineStore('store的名字',  回调函数, 插件配置选项)
 * 2. store中数据使用 vue3 的 ref/reactive 函数定义，建议用 ref
 * 3. 导出创建的 store
 */
export const useCountStore = defineStore(
	'count-store',
	() => {
		// 1. 定义类似vuex的state(全局数据)
		const count = ref(0)
		const user = ref({ name: '李斯', age: 18 })
		// 2. 定义类似vuex的 mutations( 同步修改数据)
		const add = () => {
			count.value++
		}
		const sub = () => {
			count.value--
		}
		// 3. 定义类似vuex的actions（异步）
		const asyncReset = () => {
			setTimeout(() => {
				// 3s后把 count 重置为 0
				count.value = 0
			}, 3000)
		}

		//  注意：定义的全局数据和修改数据的方法必须返回
		return {
			count,
			user,
			add,
			sub,
			asyncReset
		}
	},
	//  配置持久化
	// 1. 存储所有变量
	// {
	// 	unistorage: true // 持久化所有
	// }
	//  2. 自定义存储
	{
		unistorage: {
			key: 'maoye', // 自定义存储的属性名
			paths: ['count', 'user'] //  指定存储那些变量=》把变量名以字符串形式传入
		}
	}

)